
var debug = false;

var StarryDefaults = {
		sprite: "/images/stars.png",
		width: 14,
		height: 20,
		startAt: 1,
		maxLength: 5,
		multiplier: 1,
		showNull: true,
		align: 'left',
		feedback: '_score'
};

var Starry = Class.create();
Starry.prototype = {
	initialize: function(element) {
		document.write('<div id="'+element+'"></div>');

		while($(element) == null){ 
			//timeout
		}
		this.element = $(element);
		this.element.className = "starry";				
		this.options = {};
		Object.extend(this.options, StarryDefaults);
		Object.extend(this.options, arguments[1] || {});		
		this.name = this.options.name || "starry" + id.next();
		this.element.style.height = this.options.height + 'px';		
		if(debug) alert(this.options.showNull);

		this.children = new Array(this.options.maxLength + 1);
		if(debug) alert('children length '+ this.children.length);		
		this.hidden = document.createElement("input");
		this.hidden.type = "hidden";
		this.hidden.name = this.name;
		this.hidden.id = element+'_value';
		this.element.appendChild(this.hidden);				
		for(i=0; i < this.children.length; i++) {
			this.children[i] = new SingleStar(this, i);
			this.element.appendChild(this.children[i].element);
		}
		if( this.options.feedback ) {
			if($(this.options.feedback)!=='undefined'){
				this.feedback = $(this.options.feedback);
			}
			/*this.feedback = document.createElement('div');
			this.feedback.className = "feedback";
			this.feedback.style.cssFloat = this.options.align;
			this.element.appendChild(this.feedback);*/
		}
		this.selected = this.options.startAt;
		this.reset(this.selected);
		
	},
	set: function(index) {
		if(debug) alert('set index '+ index);
		// set the child
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height  + "px" : "0 0";
		if(this.options.feedback){ 
			if($(this.options.feedback)!=='undefined'){
				this.feedback.innerHTML = this.children[index].value;			}
			
		}
		this.selected = index;		
		this.hidden.value = id.score = this.children[index].value;

		if(debug) {
			alert(this.hidden.value);
			alert('set value ' + this.hidden.value);
		}
	},
	show: function(index) {
		if(debug) alert('show index '+ index);		
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height + "px" : "0 0";
		if(this.feedback !== 'undefined')
			this.feedback.innerHTML = this.children[index].value;	
	},
	reset: function() { this.set(this.selected); },
	clear: function() {
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = "0 0";
	}
};

var SingleStar = Class.create();
SingleStar.prototype = {
	initialize: function(parent, index) {
		this.parent = parent;
		this.index = index;
		if(debug) alert('Creating star at index '+ this.index);
		this.value = this.index * this.parent.options.multiplier;
		if(debug) alert('value '+ this.value);
		this.element = document.createElement("div");
		this.element.style.width = this.parent.options.width + "px";
		this.element.style.height = this.parent.options.height + "px";
		this.element.style.backgroundImage = "url(" + this.parent.options.sprite + ")";
		this.element.style.backgroundPosition = (this.index == 0) ? "0 -" + this.parent.options.height * 2  +"px" : "0 0";
		this.element.className = "standard_star";
		this.element.style.cssFloat = this.parent.options.align;
		if(!this.parent.options.showNull && this.index == 0) this.element.style.display = "none";
		this.element.onclick = function() { this.parent.set(this.index); 
			Score.gradeRes(id.score); 
		}.bind(this);
		this.element.onmouseover = function() { this.parent.show(this.index)}.bind(this);;
		this.element.onmouseout = this.parent.reset.bind(this.parent);
		if(debug) alert('set onclick handler');
	}
};

var id = { start: 0, prev: 0,score:0, next: function() { return this.start + this.prev++; } };